/*工具类*/

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  /*设置添加的子元素的内容为空*/
  content: "";
  /*设置添加的子元素为块级元素*/
  display: block;
  /*设置添加的子元素的高度为0*/
  height: 0;
  /*设置添加的子元素看不见*/
  visibility: hidden;
  /*给添加的子元素设置clear: both;*/
  clear: both;
}

.clearfix {
  /*兼容IE6*/
  *zoom: 1;
}


#app{ 
  width: 100%;
  // height: 4000px;
  background: #f3f5f8;
  position: relative;
  // 导航栏模块
		.nav-in{
			width: 100%;
			background: #fff;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 80px;
			line-height: 80px;
			padding: 0 15px;
			z-index: 99;
			.nav-center{
				width: 80%;
				margin: 0 auto;
				.nav-left{
					width: 21%;
					height: 100%;
					img{
						width: 200px;
						height: 50px;
						margin-top: 15px;
					}
				}
				.nav-right{
					width: 69%;
					margin-left: 10%;
					ul{
						display: flex;
						justify-content: space-around;
						li{
							height: 60px;
							position: relative;
							display: inline;
							padding-bottom: 2px;
							background-repeat: no-repeat;
							background-size: 0 2px;
							background-position: 50% 100%;
							-webkit-transition: all .5s ease-in-out;
							-moz-transition: all .5s ease-in-out;
							-o-transition: all .5s ease-in-out;
							transition: all .5s ease-in-out;
							a{
								color: #a1a9b0;
							}
							background-image: linear-gradient(to right, #000 0%, #000 50%, #000 100%);
							&:hover{
								a{
									color: #000;
								}
								background-size: 100% 2px;
							}
						}
					}
				}
			}
		}

  // 欢迎模块
  .hero-top{
    width: 100%;
    height: 800px;
    .hero{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 800px;
      background: url('../images/hero-bg.png') center center;
      .hero-in{
        p:nth-child(1){
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 60px;
          width: 450px;
          background: transparent;
          display: block;
          text-align: center;
          font-size: 40px;
          margin: 10px;
          letter-spacing: 12px;
          color: #353535;
          animation: rippleSport2 1s 0s linear;
          span{
            color: #a1a9b0;
          }
        }
        p:nth-child(2){
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 60px;
          width: 450px;
          display: block;
          letter-spacing: 2px;
          text-align: center;
          color: #8c9398;
        }
      }
    }
  }
  
  // 团队介绍模块
  .intro{
    height: 66px;
    background: #f3f5f8;
    padding: 90px 0 100px;
    text-align: center;
    p{
      font-size: 15px;
    	text-transform: uppercase;
    	color: #353535;
    	letter-spacing: 1px;
    	background: url(../images/h1-bg.png) no-repeat center bottom;
    	padding-bottom: 30px;
    	font-weight: bold;
    }

  }
  // 介绍内容模块
  .texts-center{
    width: 100%;
    height: 450px;
    // background: red;
    .texts-left{
      width: 50%;
      height: 100%;
      background-position: 200px 10px;
			img{
				width: 800px;
				height: 450px;
			}
    }
    .texts-right{
      width: 50%;
      height: 100%;
      background: #fff;
      overflow: hidden;
      .swiper{
        width: 100%;
        height: 100%;
				// background-color: red;
				color: #8c9398;
				.text-bg1{
					margin-top: 20px;
					font-size: 25px;
					text-transform: uppercase;
					color: #353535;
					letter-spacing: 1px;
					background: url(../images/h1-bg.png) no-repeat center bottom;
					padding-bottom: 30px;
    			font-weight: bold;
				}
				p{
					margin-top: 40px;
					margin-left: 50px;
					margin-right: 50px;
					font-size: 18px;
				}
        .swiper-wrapper{
          text-align: center;
          font-size: 20px;
        }
      }
    }
  }
  // 作品展示模块
  .portfolio{
    height: 450px;
    // background: green;
    position: relative;
    overflow: hidden;
    ul{
      width: 220%;
      position: absolute;
      top: 0;
      li{
        float: left;
        width: 380px;
        height: 420px;
        // background: pink;
        margin-right: 30px;
        &:last-child{
          margin-right: none;
        }
        &:nth-child(3){
          margin-right: 0;
        }
        .head{
          width: 100%;
          height: 222px;
          img{
            width: 100%;
            height: 100%;
						cursor: pointer;
          }
        }
        h2{
          font-size: 15px;
          color: #353535;
          text-transform: uppercase;
          font-weight: bold;
          text-align: center;
          margin-top: 40px;
        }
        p{
          margin-top: 40px;
          padding: 0 5px;
          text-align: center;
          color: #8c9398;
        }
      }
    }
    ol{
      margin-top: -16px;
      width: 100%;
      height: 30px;
      // background: blue;
      display: flex;
      justify-content: center;
      align-items: center;
      li{
        margin: 0 5px;
        text-align: center;
        width: 13px;
        height: 13px;
        display: block;
        /* background: #5c696a; */
        /* background: #fff; */
        cursor: pointer;
        text-indent: -9999px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;
        border: 3px solid #c9cbca;
      }
      .block{
        background: #212024;
        cursor: default;
        }
    }
  }
	// 团队人员模块
	.team{
		margin-top: 80px;
		height: 500px;
		color: #000;
		// background-color: red;
		h2{
			text-align: center;
      font-size: 15px;
    	text-transform: uppercase;
    	color: #353535;
    	letter-spacing: 1px;
    	background: url(../images/h1-bg.png) no-repeat center bottom;
    	padding-bottom: 30px;
    	font-weight: bold;
    }
		.swiper-container {
			width: 100%;
			height: 100%;
			margin-top: 40px;
		}
		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
	
		
			transition: 300ms;
			transform: scale(0.8);
		}
		.swiper-slide-active,.swiper-slide-duplicate-active{
			transform: scale(1);
		}
		.people{
			div{
				margin: 0 auto;
				height: 340px;
				text-align: center;
				h3{
					cursor: pointer;
				}
				.avatar{
					width: 150px;
					height: 150px;
				
					img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.name{
					display: block;
					margin-top: 30px;
				}
				p{
					margin-top: 30px;
					font-size: 18px;
					color: #8c9398;
				}
			
			}
		}
	}
	// 联系模块
	.connect{
		height: 450px;
		margin-top: 40px;
		position: relative;
		h2{
			text-align: center;
      font-size: 15px;
    	text-transform: uppercase;
    	color: #353535;
    	letter-spacing: 1px;
    	background: url(../images/h1-bg.png) no-repeat center bottom;
    	padding-bottom: 30px;
    	font-weight: bold;
    }
		.connectBox{
			width: 90%;
			height: 65%;
			margin: 0 auto;
			margin-top: 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			div{
				background-color: #fff;
				width: 30%;
				height: 70%;
				transition: all .5s;
				cursor: pointer;
				&:hover{
					margin-bottom: 25px;
					border-bottom: 3px solid #000;
				}
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				img{
					width: 35px;
					height: 35px;
				}
				span{
					font-size: 20px;
					font-weight: 800;
				}
				hr{
					width: 50%;
					height: 1px;
				}
				p{
					color: #8c9398;
				}
			}
		}
		.fhdb{
			width: 50px;
			height: 50px;
			background-color: rgba(255, 255, 255, .4);
			border-radius: 50%;
			position: absolute;
			top: -30px;
			left: 50%;
			transform: translatex(-50%);
			transition: all .8s;
			cursor: pointer;
			z-index: 999;
			img{
				width: 50%;
				height: 50%;
				position: relative;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			&:hover{
				background-color: rgba(255, 255, 255, .9);
			}
			
		}	
	}
	// 底部模块
	.bottom{
		height: 100px;
		background-color: #333;
		margin-top: 50px;
		.bottom-box{
			height: 80px;
			margin: 0 auto;
			line-height: 80px;
			.l{
				float: left;
				color: #a1a9b0;
			}
			.r{
				float: right;
				color: #fff;
			}
		}
	}
}

// 欢迎模块
@keyframes rippleSport2{
  from {
    opacity: 0.3;
    margin-top: -7px;
  }
  to {
    opacity: 1;
  }
}